<template>
  <div class="flex h-full">
    <a-card class="mr-2 h-full" :body-style="{ height: '100%', display: 'flex', flexDirection: 'column', padding: '8px' }">
      <BaseTitle title="系统角色" />
      <PermissionsList ref="suitListRef" :row-data="{ status: 0 }" :type="false" />
    </a-card>
    <div class="flex flex-col flex-1 overflow-hidden">
      <a-card class="flex-1 overflow-auto" :body-style="{ padding: '8px', height: '100%', overflow: 'hidden' }">
        <BaseTitle title="员工授权" />
        <div class="flex justify-between mb-2">
          <a-input v-model:value="formState.pyjm" class="w-[260px]" placeholder="员工编号/员工姓名/助记码" />
          <div>
            <a-button style="margin: 0 8px" @click="onClickReset">重置</a-button>
            <a-button type="primary" @click="getData(false)">搜索</a-button>
          </div>
        </div>
        <BaseTable
          fill
          :loading="loading"
          :data-source="dataSource"
          column-code="00001183"
          :extra-height="64"
          :pagination="false"
          :row-class-name="(record) => (record.isNew ? 'table-row-new' : '')"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'status'">
              <a-tag v-if="record.status === '0'" color="green">有效</a-tag>
              <a-tag v-else color="red">封存</a-tag>
            </template>
            <template v-if="column.dataIndex === 'empName'">
              <EditCell title="员工">
                <SelectTable v-model:value="record.empName" type="员工" @select="(selected) => onSelect(selected, record)" />
              </EditCell>
            </template>

            <template v-if="column.dataIndex === 'action'">
              <BaseButton confirm-text="确定移除?" type="link" size="small" danger @click="onDelete(record)">移除</BaseButton>
            </template>
          </template>
          <template #footer>
            <div class="text-center sticky bottom-0">
              <a-button type="primary" class="mr-2" ghost :icon="h(PlusOutlined)" @click="addRow()"> 新增一行 </a-button>
              <a-button type="primary" :icon="h(SaveOutlined)" :disabled="!isHaveNewRow" @click="saveNewRows()"> 保存 </a-button>
            </div>
          </template>
        </BaseTable>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, h } from 'vue'
import { PlusOutlined, SaveOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import BaseTable from '@/components/BaseTable'
import SelectTable from '@/components/SelectTable'
import BaseButton from '@/components/BaseButton'
import EditCell from '@/components/EditCell'
import { post } from '@/utils/request'
import PermissionsList from '../components/PermissionsList'
import useStore from '../store'

const store = useStore()
const suitListRef = ref()
const loading = ref(false)
const dataSource = ref([])
const formState = ref({})
const defaultRow = { isNew: true, yxzt: '0' }
const isHaveNewRow = computed(() => {
  return dataSource.value.some((item) => item.isNew)
})
const saveNewRows = async (addNew) => {
  const newRows = dataSource.value.filter((item) => item.isNew)
  newRows.forEach((item) => {
    fetchSave(item, addNew)
  })
}
const editRow = (row) => {
  !row.isNew && fetchSave(row)
}
const fetchSave = async (row, addNew) => {
  if (row.empName && row.empId) {
    const { code, msg } = await post('/operation/opex/doSaveRoleEMP', { empId: row.empId, roleId: store.currentRole.id })
    if (code !== 0) return message.error(msg || '操作失败')
    message.destroy()
    message.success(row.isNew ? '新增成功' : '修改成功')
    getData(addNew)
  } else {
    message.destroy()
    message.error('请填写完整信息')
  }
}
//获取数据
const getData = async (addNew) => {
  loading.value = true
  const { data, code } = await post('/operation/opex/getSystemMenuListByEMP', { roleId: store.currentRole.id, pyjm: formState.value.pyjm })
  loading.value = false
  if (code !== 0) return
  if (data.length > 0) {
    dataSource.value = data.map((item) => {
      return { ...item, key: item.id }
    })
    addNew && addRow()
  } else {
    dataSource.value = [{ key: 'row-0', ...defaultRow, status: '0' }]
  }
}

const onClickReset = () => {
  formState.value.pyjm = ''
  getData()
}

watch(
  () => store.currentRole.id,
  () => {
    getData()
  },
  {
    immediate: true
  }
)

const onSelect = (selected, record) => {
  record.empName = selected.empName
  record.empId = selected.empId
  record.sex = selected.sex
  record.phone = selected.phone
  record.bmmc = selected.bmmc
  record.lbmc = selected.emplb
  record.ksmc = selected.ksmc
  editRow(record)
}

const onDelete = async (row) => {
  if (row.id) {
    const { code } = await post('/operation/opex/doRemoveRoleEMP', { id: row.id })
    if (code !== 0) return message.error('移除失败')
    message.success('移除成功')
    getData()
  } else {
    dataSource.value = dataSource.value.filter((item) => item.key !== row.key)
  }
}
const addRow = () => {
  const key = `row-${dataSource.value.length}`
  dataSource.value.push({ key, ...defaultRow, status: '0' })
}
</script>
<style lang="less" scoped>
:deep(.ant-radio-button-wrapper) {
  padding: 0 25px;
}
</style>
